94:I[903690,["/chat-static/_next/static/immutable/chunks/2dcuzvdevz4_k.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3yud-vtspzl8e.js","/chat-static/_next/static/immutable/chunks/0p53vlmp4shc6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/14em_ffr0k3a5.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0b4iu2fk2i2c3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2j03b7_40fipe.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/0qa_rvco-l87d.js","/chat-static/_next/static/immutable/chunks/0dc2z2957q9wo.js","/chat-static/_next/static/immutable/chunks/30afi51ct7djr.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/1cjv7-9x6cayj.js"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/immutable/chunks/2dcuzvdevz4_k.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3yud-vtspzl8e.js","/chat-static/_next/static/immutable/chunks/0p53vlmp4shc6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/14em_ffr0k3a5.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0b4iu2fk2i2c3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2j03b7_40fipe.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/0qa_rvco-l87d.js","/chat-static/_next/static/immutable/chunks/0dc2z2957q9wo.js","/chat-static/_next/static/immutable/chunks/30afi51ct7djr.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/1cjv7-9x6cayj.js"],"SWRDataProvider"] 96:T3c66,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import UserProfileCard from "@/components/user-profile-card" export default function Home() { return (

{/* Dark overlay */}

{/* Main content */}

{/* Footer */}

Designed and Developed with ❤️ by{" "} Dollar Gill

) } [V0_FILE]png:file="public/abstract-gradient-dark-blue-purple.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-gradient-dark-blue-purple-Hth2aOMFg323MJ0FR232mgoA3xNIKo.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-portrait-aRtFhI6toDZYfQKtZxHYSmAPGsdCBC.png" isMerged="true" [V0_FILE]png:file="public/abstract-design-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-design-pattern-mPeHvObFXrKYMCgsSQanjSepGQjtU8.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-profile-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { MapPin, Calendar, Mail, Globe, Users, Heart, MessageCircle, Settings, Edit3, Youtube, X, Check, } from "lucide-react" interface UserProfile { name: string username: string bio: string location: string joinDate: string email: string phone: string website: string followers: number following: number posts: number likes: number avatar: string coverImage: string skills: string[] isFollowing: boolean } const mockUser: UserProfile = { name: "Diecast by Dollar", username: "@DiecastByDollar", bio: "Hey I'm Dollar Gill! 🚗 I collect Hot Wheels, Jada, Matchbox, Maisto, Pink Slips and other diecast cars. Passionate about miniature automotive art! 🏎️✨", location: "Sydney, Australia", joinDate: "August 2025", email: "hi@diecastbydollar.com", phone: "+1 (555) 123-4567", website: "www.DiecastByDollar.com", followers: 2847, following: 892, posts: 156, likes: 12400, avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/21616217_90.jpg-YQw7j36MOYnX34E2mXOCDDXrwsk2Wz.jpeg", coverImage: "/abstract-design-pattern.png", skills: ["Hot Wheels", "Maisto", "Matchbox", "Jada", "Pink Slips"], isFollowing: false, } export default function UserProfileCard() { const [user, setUser] = useState(mockUser) const [isLoading, setIsLoading] = useState(false) const [isEditing, setIsEditing] = useState(false) const [isLiked, setIsLiked] = useState(false) const [editForm, setEditForm] = useState(mockUser) const handleFollow = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1000)) setUser((prev) => ({ ...prev, isFollowing: !prev.isFollowing })) setIsLoading(false) } const handleLike = () => { setIsLiked(!isLiked) } const handleEdit = () => { setIsEditing(true) setEditForm(user) } const handleSave = () => { setUser(editForm) setIsEditing(false) } const handleCancel = () => { setEditForm(user) setIsEditing(false) } const formatNumber = (num: number) => { if (num >= 1000) { return (num / 1000).toFixed(1) + "k" } return num.toString() } return (

{/* Profile Content */}

{/* Avatar and Basic Info */}

{/* Avatar */}

{/* Name, Username, and YouTube Button */}

{isEditing ? (

setEditForm({ ...editForm, name: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-lg font-semibold" placeholder="Name" /> setEditForm({ ...editForm, username: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm" placeholder="Username" />

) : ( <>

{user.name}

{user.username}

)}

{/* Settings Button */}

{isEditing ? (

) : ( )}

{/* Bio */} {isEditing ? (

setEditForm({ ...editForm, bio: e.target.value })}
            className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm leading-relaxed resize-none"
            placeholder="Bio"
            rows={3}
          />
        ) : (
          <p className="text-white/85 text-sm leading-relaxed">{user.bio}</p>
        )}

{/* Skills */}
        <div className="flex flex-wrap gap-1.5">
          {isEditing ? (
            <div className="w-full">
              <Input
                value={editForm.skills.join(", ")}
                onChange={(e) =>
                  setEditForm({ ...editForm, skills: e.target.value.split(", ").filter((s) => s.trim()) })
                }
                className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm"
                placeholder="Skills (comma separated)"
              />
            </div>
          ) : (
            user.skills.map((skill, index) => (
              <Badge
                key={index}
                className="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/30 text-blue-100 text-xs px-2.5 py-1 transition-all duration-300 font-medium"
              >
                {skill}
              </Badge>
            ))
          )}
        </div>

{/* Stats */}
        <div className="grid grid-cols-4 gap-3 py-2">
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.posts)}</p>
            <p className="text-white/60 text-xs font-medium">Posts</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.followers)}</p>
            <p className="text-white/60 text-xs font-medium">Followers</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.following)}</p>
            <p className="text-white/60 text-xs font-medium">Following</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.likes)}</p>
            <p className="text-white/60 text-xs font-medium">Likes</p>
          </div>
        </div>

{/* Contact Info */}
        <div className="space-y-2.5 bg-white/5 rounded-xl p-4 border border-white/10">
          {isEditing ? (
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.location}
                  onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Location"
                />
              </div>
              <div className="flex items-center gap-3">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.joinDate}
                  onChange={(e) => setEditForm({ ...editForm, joinDate: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Join Date"
                />
              </div>
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.email}
                  onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Email"
                />
              </div>
              <div className="flex items-center gap-3">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.website}
                  onChange={(e) => setEditForm({ ...editForm, website: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Website"
                />
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.location}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">Joined {user.joinDate}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.email}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.website}</span>
              </div>
            </>
          )}
        </div>

{/* Action Buttons */}
        <div className="flex gap-2.5 pt-1">
          <Button
            onClick={handleFollow}
            disabled={isLoading}
            className="flex-1 bg-blue-500 hover:bg-blue-600 border-0 text-white font-medium transition-all duration-300 hover:scale-[1.02] shadow-lg hover:shadow-xl"
          >
            {isLoading ? <Users className="h-4 w-4 animate-spin mr-2" /> : <Users className="h-4 w-4 mr-2" />}
            {user.isFollowing ? "Following" : "Follow"}
          </Button>

<Button
            onClick={handleLike}
            className={`bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30 text-white transition-all duration-300 hover:scale-[1.02] shadow-md ${isLiked ? "bg-red-500/20 border-red-400/30" : ""}`}
          >
            <Heart className={`h-4 w-4 transition-colors duration-300 ${isLiked ? "fill-red-400 text-red-400" : ""}`} />
          </Button>
        </div>
      </div>
    </div>
  )
}8a:["$","$L94",null,{"chatId":"uF5NUOGpMGF","children":["$","$L95",null,{"data":{"@\"active-block\",\"uF5NUOGpMGF\",":{"id":"b_QJcoFuK0rMm","messageId":"pM6btdT3Kqbgcuo3GATgeLSXKaOk2DEr","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"user-profile-card","type":"code-project","project":"user-profile-card","taskNameActive":"Adding interactive features","taskNameComplete":"Added interactive features"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uF5NUOGpMGF\",":false,"":null},"children":"$L97"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This